<template>
  <div class="page-container">
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单明细</p>
      <div class="order-item-box">
        <span class="order-item-info">车牌号：</span>
        <span class="order-item-info">停车时长：</span>
        <span class="order-item-info">停车场名称：</span>
        <span class="order-item-info">进场时间：</span>
        <span class="order-item-info">出场时间：</span>
        <span class="order-item-info">泊位号：</span>
        <span class="order-item-info">订单创建时间：</span>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">欠费补缴</p>
      <div class="order-item-box">
        <span class="order-item-info">停车场名称：</span>
        <span class="order-item-info">停车时长：</span>
        <span class="order-item-info">欠费：</span>
        <span class="order-item-info">进场时间：</span>
        <span class="order-item-info">出场时间：</span>
        <span class="order-item-info">泊位号：</span>
        <span class="order-item-info">订单创建时间：</span>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">支付信息</p>
      <div class="order-item-box">
        <span class="order-item-info">实付金额：</span>
        <span class="order-item-info">账单总金额：</span>
        <span class="order-item-info">优惠金额：</span>
        <span class="order-item-info">优惠券名称：</span>
        <span class="order-item-info">支付方式：</span>
        <span class="order-item-info">消费时间：</span>
        <span class="order-item-info">状态：</span>
        <span class="order-item-info">收款商家：</span>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'OrderDetail',
  data() {
    return {
      form: {},
      loading: false,
      step: 1,
      stepList: [
        {
          title: '订单创建',
          time: '2022-12-12 12:00:00',
          status: 'success'
        },
        {
          title: '完成出票',
          status: 'process'
        },
        {
          title: '部分核销'
        },
        {
          title: '已完成'
        }
      ]
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '订单编号', prop: 'account', attrs },
        { label: '产品名称', prop: 'roleName', attrs },
        { label: '规则名称', prop: 'userName', attrs },
        { label: '零售价', prop: 'mobile', attrs },
        { label: '检验店铺', prop: 'mobile', attrs },
        { label: '产生时间', prop: 'sexStr', attrs },
        { label: '状态', slot: 'statusStr', attrs }
      ]
    },
    formItems() {
      return [
        {
          type: 'select',
          label: '订单状态',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '订单编号',
          prop: 'roleName'
        }, {
          type: 'select',
          label: '支付方式',
          prop: 'roleName',
          options: this.payMethodOptions,
          attrs: {
            multiple: true
          }
        }, {
          type: 'date',
          label: '产生时间',
          prop: 'dateRange',
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      // const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      // const data = {
      //   pageNo,
      //   pageSize,
      //   createStartTime,
      //   createEndTime,
      //   enterpriseId: this.currentEnterprise.id,
      //   siteId: this.currentSite.id,
      //   ...formQuery
      // }
      // getRoleList(data).then(res => {
      //   this.loading = false
      //   done({ data: res.data || [], total: res.count || 0 })
      // }).catch(() => {
      //   done({ data: [], total: 0 })
      //   this.loading = false
      // })
      done({ data: [1], total: 0 })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-item{
  margin-bottom: 20px;
  .title{
    font-weight: bold;
  }
}
.order-content-box{
  display: flex;
  .order-image{
    width: 160px;
    margin-right: 25px;
    border-radius: 20px;
  }
  .order-content-detail{
    font-size: 16px;
    line-height: 30px;
    .p1{
      font-size: 28px;
      font-weight: 600;
      line-height: 40px;
    }
  }

}

.order-item-box{
  display: flex;
  flex-wrap: wrap;
  .order-item-info{
    line-height: 30px;
    width: 50%;
  }
}
</style>
